/**
* Created by wl
* 项目管理>持有中-详情页-高管/股东-股东信息编辑信息
*/
<template>
    <div>
        <div>
            <div class="ca-title">
                <h3>股东信息</h3>
                <div class="el-right" v-show="showBtn">
                    <el-button  type="primary" @click="dialogVisible=true" size="small">上传</el-button>
                    <el-button type="primary" @click="close" size="small">保存</el-button>
                    <el-button @click="close" size="small">取消</el-button>
                </div>
            </div>
            <el-dialog :title="title" :visible.sync="dialogVisible" width="500px">
                <div>
                    <p>选择日期：
                        <el-date-picker
                            v-model="groupDate"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </p>
                    <el-upload
                        class="upload-demo ca-m-t-28"
                        ref="upload"
                        :multiple="false"
                        :data="uploadData"
                        :action="action"
                        :headers="headers"
                        :before-upload="beforeUpload"
                        :on-success="handleSuccess"
                        :file-list="renderList"
                        :auto-upload="false"
                    >
                        <el-button slot="trigger" type="primary" size="small">上传文件</el-button>
                        <div slot="tip" class="ca-tip">只能上传xls、xlsx格式</div>
                    </el-upload>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitUpload" size="small">确定</el-button>
                    <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                </div>
            </el-dialog>
            <div class="ca-file-ul">
                <el-row class="ca-file-row" :gutter="20" v-for="(file, index) in fileList.resultData" :key="index">
                    <el-col :span="4" class="upload-time">{{file.uploadTime|moment('YYYY-MM-DD')}}</el-col>
                    <el-col :span="1">
                        <tz-icon-file-type class="ca-m-r-5" :fileType="file.fileName"></tz-icon-file-type>
                    </el-col>
                    <el-col :span="8">
                        <div class="ca-text-over-flow-ellipsis"
                            @click="previewFileCheck(file.id, file.fileName)">
                            <span class="ca-font-size-16 ca-pointer">{{file.fileName}}</span>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="ca-text-over-flow-ellipsis">{{file.uploadUserName}}</div>
                    </el-col>
                    <el-col :span="3" class="ca-pull-right ca-align-right">
                        <a class="ca-download ca-m-r-10" @click="downloadFile(file.id)"></a>
                        <el-button class="ca-table-btn" @click="deleteFile(file.id)">
                            <i class="fa fa-times"></i>
                        </el-button>
                    </el-col>
                </el-row>
                <div class="ca-align-right">
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page="params.pageIndex"
                        :page-size="params.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="fileList.totalCount">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import {api} from '../../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    export default {
        data() {
            return {
                title: '',
                dialogVisible: false,
                fileTime: [],
                groupDate: new Date(),
                // 参数
                params: {
                    fileName: '',
                    fileType: '10026',
                    businessId: this.$route.params.itemId,
                    fileChildType: '',
                    industryId: '',
                    pageIndex: 1,
                    pageSize: 10,
                },
                // 已上传文件列表
                fileList: {},
                renderList: [],
                // 上传需要的额外参数
                uploadData: {},
                // 设置token
                headers: { 'X-Token': this.$store.state.user.token	},
                // 上传地址
                action: this.baseURL + api.UPLOAD_FILE.url,
                // 文件夹
                fileChildType: '',
                industryId: '',
                businessId: this.$route.params.itemId,
                // 文件夹列表
                fileChildTypeList: [],
                // 支持的文件格式集合
                typeList: this.$store.state.csConst.FILE_TYPE,
                // 多选后上传成功后的返回值的集合
                multipleUploadSuccessRes: [],
                // 支持长传格式类型
                uploadType: 'xlsx,xls',
                fileType: '10026',
            }
        },
        watch: {
            fileType: function (val) {
                this.fileType = val
            },
            'fileChildType': function (newOld) {
                this.action = this.baseURL + api.UPLOAD_FILE.url + `?industryId=${this.industryId}&businessId=${this.businessId}&fileType=${this.fileType}&fileChildType=${newOld}`;
            }
        },
        props: {
            showBtn: {
                type: Boolean,
                default: function () {
                    return false;
                }
            },
        },
        mounted() {
            this.action = this.action + `?industryId=${this.industryId}&businessId=${this.businessId}&fileType=${this.fileType}&fileChildType=${this.fileChildType}`;
            this.getFileList()
        },
        methods: {
            close() {
                this.$emit('close')
            },
            // 上传之前
            beforeUpload(file) {
                let isLt20M = file.size / 1024 / 1024 < 20;
                let isType = false;
                let name = file.name.split('.');
                let type = name[name.length - 1];
                // 默认支持格式
                if (this.uploadType === 'all') {
                    isType = this.typeList.indexOf(type) !== -1;
                } else { // 传参数支持格式
                    isType = this.uploadType.split(',').indexOf(type) !== -1;
                }
                if (!isLt20M && !isType) {
                    this.$message.error('上传文件大小不能超过20MB且不支持此文件类型！');
                    return false;
                }
                // 超过20M
                if (!isLt20M) {
                    this.$message.error('上传文件大小不能超过 20MB!');
                    return false;
                }
                if (!isType) {
                    this.$message.error('不支持的文件类型');
                    return false;
                }
                return isLt20M && isType;
            },
            // 点击上传按钮
            submitUpload() {
                apiHttp(api.CHECK_SHAREHOLDER, {itemId: this.$route.params.itemId}).then(ret=> {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.fileTime = Object.keys(ret.data)
                        if (this.fileTime.length > 0) {
                            this.fileTime.map(time => {
                                if (this.$moment(this.groupDate).format('YYYY-MM-DD') === time) {
                                    this.$message({
                                        message: '上传文件不能选同一时间',
                                        type: 'error',
                                        center: true
                                    })
                                    return false
                                } else {
                                    this.$refs.upload.submit();
                                }
                            })
                        } else {
                            this.$refs.upload.submit();
                        }
                    }
                })
            },
            // 上传成功
            handleSuccess(response, file, fileList) {
                this.multipleUploadSuccessRes.push(response);
                // 上传多个时,判断是否全部成功后才返回
                if (this.multipleUploadSuccessRes.length === fileList.length) {
                    this.$refs.upload.clearFiles();
                    this.dialogVisible = false;
                    this.multipleUploadSuccessRes = [];
                    this.analysis(response.data.id)
                }
            },
            // 解析文件
            analysis(data) {
                let query = {
                    itemId: this.$route.params.itemId,
                    fileId: data,
                    groupDate: this.$moment(this.groupDate).format('YYYY-MM-DD')
                }
                apiHttp(api.ANALYSIS_SHAREHOLDER, query).then(ret=> {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.$message({
                            message: '上传成功！',
                            type: 'success',
                            center: true
                        });
                        this.getFileList();
                        this.$emit('save')
                    }
                })
            },
            // 获取文件列表
            async getFileList() {
                let params = this.params;
                let resData = await apiHttp(api.GET_FILE_LIST, params);
                if (resData.resCode === STATUS_HTTP_SUCCESS) {
                    this.fileList = resData.data || {};
                }
            },
            // 分页
            handleCurrentChange(val) {
                this.params = {...this.params, pageIndex: val};
                this.getFileList();
            },
            // 下载文件
            async downloadFile(id) {
                if (id) {
                    window.open(this.baseURL + api.DOWNLOAD_FILE.url + id + '?X-Token=' + this.$store.state.user.token);
                }
            },
            // 预览文件校验
            async previewFileCheck(id, fileName) {
                let fileTypeList = fileName.split('.');
                let fileType = fileTypeList[fileTypeList.length - 1].toLocaleLowerCase();
                if (fileType === 'gif' || fileType === 'png' || fileType === 'jpg' || fileType === 'jpge') {
                    this.$message({
                        type: 'warning',
                        message: '该文件暂不支持预览!',
                        center: true
                    });
                    return;
                }
                this.fullLoading = true;
                let params = {
                    id: id
                };
                let resData = await apiHttp(api.PREVIEW_FILE_CHECK, params);
                if (resData.resCode === STATUS_HTTP_SUCCESS) {
                    this.previewFile(resData.data);
                }
                this.fullLoading = false;
            },
            // 预览文件
            async previewFile(fileName) {
                if (fileName) {
                    window.open(this.baseURL + api.PREVIEW_FILE.url + '?X-Token=' + this.$store.state.user.token + '&fileName=' + fileName);
                }
            },
            // 删除文件
            deleteFile(id) {
                let params = {
                    fileId: id,
                    itemId: this.$route.params.itemId,
                };
                this.$confirm('确认删除此文件?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    showClose: false,
                }).then(async () => {
                    let resData = await apiHttp(api.DELETE_FILE, params);
                    if (resData.resCode === STATUS_HTTP_SUCCESS) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!',
                            center: true
                        });
                        this.$emit('save')
                        this.getFileList();
                    }
                })
            },
        },
        components: {
            csList: require('__components/file-list/edit'),
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-right {
    float: right;
}
.el-info {
    font-size: 22px;
    color: #ccc;
    padding-top: 20px;
}
.upload-btn {
    float: left;
    margin-right: 10px;
}
.pull-right {
    float: right;
    display: none;
}
.ca-tip {
    float: right;
    margin-right: 30%;
    font-size: 18px;
    line-height: 30px;
}
</style>
